<template>
	<view>
		<good-basic :basicdata='gooddata.goodbasic'></good-basic>
		<view class="malldetail-black"></view>
		<comment :commentdata='gooddata.comment'></comment>
		<view class="malldetail-black"></view>
		<introduce :list='gooddata.goodintroduced'></introduce>
		<view class="malldetail-black"></view>
		<view class="malldetail-imgdetail-title">图文详情</view>
		<!-- <image v-for="(item,index) in gooddata.goodbasic.goodImgList" :key='index' class="malldetail-imgdetail-img" :src="item.url"></image>
		<view class="malldetail-black"></view>
		<view class="malldetail-imgdetail-title">{{gooddata.notes.title}}</view>
		<view class="malldetail-flex-h" v-for="(item,index) in gooddata.notes.detail" :key='index'>
			<text class="malldetail-return-title">{{item.title}}</text>
			<text class="malldetail-return-detail">{{item.detail}}</text>
		</view> -->
		<uParse :content="htmlString" @preview="preview" @navigate="navigate" />
		<view class="blank"></view>
		<!-- <good-action></good-action> -->
		<view class="malldetail-buy">
			<image class="malldetail-shopcart-img" @click="shopcar()" src="/static/goods/shopcart.png"></image>
			<uni-badge :text="cartNum" :type="'primary'" class="badge"></uni-badge>
			<!-- <image v-if="!isCollect" class="malldetail-star-img" src="/static/goods/star.png" @click="collection('true')"></image> -->
			<!-- <image v-else class="malldetail-star-img" src="/static/goods/star-success.png" @click="collection('false')"></image> -->
			<text class="malldetail-shopcart-add" @click="showSpec()">加入购物车</text>
			<!-- <text class="malldetail-now-buy" @click="nowBuy">立即购买</text> -->
		</view>
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="content">
					<view class="title">选择规格：</view>
					<view class="sp">
						<view v-for="(item,index) in goodsData.spec" :class="[index==selectSpec?'on':'']" @tap="setSelectSpec(index)" :key="index">{{item}}</view>
					</view>
					<!-- <view class="length" v-if="selectSpec!=null"> -->
					<view class="length">
						<view class="text">数量</view>
						<view class="number">
							<view class="sub" @tap="sub()">
								<view class="icon jian"></view>
							</view>
							<view class="input">
								<input type="number" disabled="disabled" v-model="goodsData.number" />
							</view>
							<view class="add"  @tap="add()">
								<view class="icon jia"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn"><view class="button" @tap="shouccar">完成</view></view>
			</view>
		</view>
	</view>
</template>

<script>
	import goodBasic from '@/components/shopComponents/goods/good-basic.vue'
	// import goodAction from '@/components/shopComponents/goods/good-action.vue'
	import comment from '@/components/shopComponents/goods/comment.vue'
	import introduce from '@/components/shopComponents/goods/introduce.vue'
	import uniBadge from "@/components/uni-badge/uni-badge.vue"
	
	import mockData from '@/data/good.js'
	
	import uParse from '@/components/uParse/src/wxParse.vue'
	export default {
		components: {
			goodBasic,
			comment,
			introduce,
			uParse,
			uniBadge
		},
		data() {
			return {
				goods_id:'',
				
				gooddata: {},
				htmlString: "",
				baseURL:this.$API.baseURL,
				cartNum:0,//购物车数量
				
				specClass: '',//规格弹窗css类，控制开关动画
				selectSpec:0,//选中规格
				goodsData:{
					id:1,
					name:"商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题",
					price:"127.00",
					number:1,
					service:[
						{name:"正品保证",description:"此商品官方保证为正品"},
						{name:"极速退款",description:"此商品享受退货极速退款服务"},
						{name:"7天退换",description:"此商品享受7天无理由退换服务"}
					],
					spec:[],
					comment:{
						number:102,
						userface:'../../static/img/face.jpg',
						username:'大黑哥',
						content:'很不错，之前买了很多次了，很好看，能放很久，和图片色差不大，值得购买！'
					}
					
				},
			}
		},
		onLoad(e) {
			// #ifdef APP-PLUS
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				if(icon){icon.hide();}
			}, 100);
			// #endif
			// console.log(e.id)
			// this.gooddata = mockData.data;
			// console.log(mockData.data);
			this.mallGoodsDetail(e.id);
			this.goods_id = e.id;
			this.mallShoppingcar_list()
		},
		methods:{
			//获取购物车总数
			mallShoppingcar_list() {
				var _this=this;
				uni.request({
					url:this.$API.mallShoppingcar_list,
					method:"POST",
					data:{u_id:_this.userid},
					header:this.$API.get_head(),
					success: (res) => {
						_this.cartNum=res.data.records;
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					 }
				})
			},
			shopcar(){
				uni.reLaunch({
					url:'/pages/shopPages/index?current=2',
				})
			},
			//加入购物车
			shouccar(){
				var _this=this;
				uni.request({
					url:this.$API.joinShoppingCar,
					method:"POST",
					data:{goods_id:this.goods_id,userid:uni.getStorageSync("userid"),num:this.goodsData.number,guige:this.goodsData.spec[this.selectSpec]},	
					header:this.$API.get_head(),
					success: (res) => {
						uni.showToast({
							title:res.data.message,
							icon:'none'
						})
						_this.mallShoppingcar_list()
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
				this.hideSpec();
			},
			//2.3商品详情
			mallGoodsDetail(id){
				var _this=this;
				uni.request({
					url:this.$API.mallGoodsDetail,
					method:"GET",
					data:{
						goods_id:id
					},
					header:this.$API.get_head(),
					success: (res) => {
						var data = res.data;
						_this.htmlString = data.detail;
						
						
						var goodImgList = data.lunbo_pic.split(',');
						var img =[];
						goodImgList.forEach(function(v,i){
							img.push({'url': _this.baseURL+ v})
						})
						_this.gooddata.goodbasic = {
							goodImgList:img,
							goodName:data.name,
							goodPrice:data.price,
						}
						if(data.attr!=null){
							var tempadta = JSON.parse(data.attr);
							tempadta.forEach(function(v,i){
								_this.goodsData.spec.push(v.guige)
							})
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					 }
				})
			},
			//规格弹窗
			showSpec(fun) {
				// console.log('show');
				this.specClass = 'show';
				this.specCallback = fun;
			},
			discard() {
				//丢弃
			},
			sub(){
				if(this.goodsData.number>1){
					this.goodsData.number--;
				}
			},
			add(){
				this.goodsData.number++;
			},
			//关闭规格弹窗
			hideSpec() {
				this.specClass = 'hide';
				//回调
			
				this.selectSpec&&this.specCallback&&this.specCallback();
				this.specCallback = false;
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
			setSelectSpec(i){
				this.selectSpec = i
			}
		}
	}
</script>

<style lang="scss">
	@import url("../../../../components/uParse/src/wxParse.css");
	// 数字角标
	.badge{
		position: absolute;
		left: 80upx;
		top: 10upx;
	}
	
	.malldetail-black {
		height: 17upx;
		background-color: #f2f2f2;
	}

	.malldetail-flex-h {
		display: flex;
		flex-direction: column;
	}

	.malldetail-imgdetail-title {
		margin: 24.3upx 33upx 33upx 24.3upx;
		font-size: 31.3upx;
		color: #1a1a1a;
	}

	.malldetail-imgdetail-img {
		width: 750upx;
		height: 1207upx;
	}

	.malldetail-return-title {
		margin: 0upx 33upx 7.5upx 33upx;
		font-size: 31.3upx;
		color: #1a1a1a;
	}

	.malldetail-return-detail {
		margin: 0upx 33upx 32.8upx 33upx;
		color: #808080;
		font-size: 27.1upx;
	}

	.blank {
		height: 100upx;
	}
	
	
	
	/*购买*/
	.malldetail-buy {
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		right: 0upx;
		border-color: #cccccc;
		background-color: #ffffff;
		border-top-width: 0.5upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		
		.malldetail-shopcart-img {
			width: 50upx;
			height: 50upx;
			margin: 0upx 50upx 0upx 50upx;
		}
		
		// .malldetail-star-img {
		// 	width: 50upx;
		// 	height: 50upx;
		// 	margin: 0upx 33.3upx 0upx 0upx;
		// }
		
		.malldetail-shopcart-add {
			// padding: 25upx 56upx;
			padding: 25upx 0;
			background-color: #ffb700;
			font-size: 31.3upx;
			color: #ffffff;
			width:100%;
			text-align: center;
		}
		
		.malldetail-now-buy {
			padding: 25upx 68upx;
			background-color: #ff7500;
			font-size: 31.3upx;
			color: #ffffff;
		}
	}
	



/*规格弹窗*/
page {
	background-color: #f8f8f8;
}
@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-100%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(-100%);
		}
		100% {
			transform: translateY(0);
		}
	}
@font-face {
	font-family: 'HMfont-home';
	src: url('data:application/x-font-woff2;charset=utf-8;base64,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')
		format('woff2');
}
.icon {
	font-family: 'HMfont-home' !important;
	font-size: 26upx;
	font-style: normal;
	&.fenxiang {
		&:before {
			content: '\e642';
		}
	}
	&.xiangqian {
		&:before {
			content: '\e634';
		}
	}
	&.xiangyou {
		&:before {
			content: '\e637';
		}
	}
	&.shoucangsel {
		&:before {
			content: '\e62c';
		}
	}
	&.shoucang {
		&:before {
			content: '\e62e';
		}
	}
	&.tongzhi {
		&:before {
			content: '\e729';
		}
	}
	&.kefu {
		&:before {
			content: '\e61e';
		}
	}
	&.cart {
		&:before {
			content: '\e614';
		}
	}
	&.jia {
		&:before{content:"\e641";}
	}
	&.jian {
		&:before{content:"\e643";}
	}
}
.status {
	width: 100%;
	height: 0;
	position: fixed;
	z-index: 10;
	top: 0;
	/*  #ifdef  APP-PLUS  */
	height: var(--status-bar-height); //覆盖样式
	/*  #endif  */
	background-color: #f1f1f1;
}
.header {
	width: 100%;

	height: 100upx;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 10;
	/*  #ifdef  APP-PLUS  */
	top: var(--status-bar-height);
	/*  #endif  */
	.before,
	.after {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);
		/*  #endif  */

		.back {
			width: 125upx;
			height: 60upx;
			flex-shrink: 0;
			.icon {
				margin-left: -10%;
				width: 60upx;
				height: 60upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 42upx;
			}
		}
		.middle {
			width: 100%;
		}
		.icon-btn {
			width: 125upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			.icon {
				&:first-child{
					margin-right: 5upx;
				}
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 42upx;
			}
		}
	}
	.before {
		.back {
			.icon {
				color: #fff;
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 100%;
			}
		}
		.icon-btn {
			.icon {
				color: #fff;
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 100%;
				
			}
		}
	}
	.after {
		background-color: #f1f1f1;
		.back {
			.icon {
				color: #666;
			}
		}
		.icon-btn {
			.icon {
				color: #666;
			}
		}
		.middle {
			font-size: 32upx;
			height: 90upx;
			display: flex;
			justify-content: center;
			align-items: center;
			view {
				padding: 0 3%;
				margin: 0 3%;
				display: flex;
				justify-content: center;
				align-items: center;
				&.on {
					margin-bottom: -4upx;
					color: #f47952;
					border-bottom: solid 4upx #f47952;
				}
			}
		}
	}
}
.swiper-box {
	position: relative;
	width: 100%;
	height: 100vw;
	swiper {
		width: 100%;
		height: 100vw;
		swiper-item {
			image {
				width: 100%;
				height: 100vw;
			}
		}
	}
	.indicator{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}
}
.info-box {
	width: 92%;
	padding: 20upx 4%;
	background-color: #fff;
	margin-bottom: 20upx;
}

.goods-info {
	.price {
		font-size: 46upx;
		font-weight: 600;
		color: #f47925;
	}
	.title {
		font-size: 30upx;
	}
}
.spec {
	.row {
		width: 100%;
		display: flex;
		align-items: center;
		margin: 0 0 30upx 0;
		.text {
			font-size: 24upx;
			color: #a2a2a2;
			margin-right: 20upx;
		}
		.content {
			font-size: 28upx;
			display: flex;
			flex-wrap: wrap;
			.serviceitem{
				margin-right: 10upx;
			}
			.sp {
				width: 100%;
				display: flex;
				view {
					background-color: #f6f6f6;
					padding: 5upx 10upx;
					color: #999;
					margin-right: 10upx;
					font-size: 20upx;
					border-radius: 5upx;
					&.on{
						border: solid 1upx #f47952;
						padding: 4upx 8upx;
					}
				}
			}
		}
		.arrow {
			position: absolute;
			right: 4%;
			.icon {
				color: #ccc;
			}
		}
	}
}
.comments {
	.row {
		width: 100%;
		height: 40upx;
		display: flex;
		align-items: center;
		margin: 0 0 30upx 0;
		.text {
			font-size: 30upx;
		}
		.arrow {
			font-size: 28upx;
			position: absolute;
			right: 4%;
			color: #17e6a1;
			.show {
				display: flex;
				align-items: center;
				.icon {
					color: #17e6a1;
				}
			}
		}
	}
	.comment {
		width: 100%;
		.user-info {
			width: 100%;
			height: 40upx;
			display: flex;
			align-items: center;
			.face {
				width: 40upx;
				height: 40upx;
				margin-right: 8upx;
				image {
					width: 40upx;
					height: 40upx;
					border-radius: 100%;
				}
			}
			.username {
				font-size: 24upx;
				color: #999;
			}
		}
		.content {
			margin-top: 10upx;
			font-size: 26upx;
		}
	}
}
.description {
	.title {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: #999;
	}
}
.footer {
	position: fixed;
	bottom: 0upx;
	width:100%;
	border-top: solid 1upx #eee;
	background-color: #fff;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	
	text-align: center;
	.icons {
		display: flex;
		height: 98upx;
		.box {
			width:210upx;
			height: 98upx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			image{
				width: 55upx;
				height:55upx;
				display: block;
				margin:0 auto;
			}
			.text {
				display: flex;
				justify-content: center;
				width: 100%;
				font-size: 24upx;
				color: #666;
				line-height:1;
			}
		}
	}
	.btn {
		text-align:center;
		height: 98upx;
		overflow: hidden;
		display: flex;
		width:540upx;
		.joinCart{
			height: 98upx;
			color: #fff;
			font-size: 34upx;
			line-height:98upx;
			text-align: center;
			background-color: #067aee;
			width:100%;
			text-align: center;
		}
	}
}
.popup {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	display: none;
	.mask{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 21;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.layer {
		position: fixed;
		z-index: 22;
		bottom: -70%;
		width: 92%;
		padding: 0 4%;
		height: 70%;
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		.content {
			width: 100%;
			padding: 20upx 0;
		}
		.btn {
			width: 100%;
			height: 100upx;
			.button {
				width: 100%;
				height: 80upx;
				border-radius: 40upx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f47952;
				font-size: 28upx;
			}
		}
	}
	
	&.show {
		display: block;
		.mask{
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		display: block;
		.mask{
			animation: hidePopup 0.2s linear both;
		}
		
		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	&.service {
		.row {
			margin: 30upx 0;
			.title {
				font-size: 30upx;
				margin: 10upx 0;
			}
			.description {
				font-size: 28upx;
				color: #999;
			}
		}
	}
	&.spec {
		.title {
			font-size: 30upx;
			margin: 30upx 0;
		}
		.sp {
			display: flex;
			view {
				font-size: 28upx;
				padding: 5upx 20upx;
				border-radius: 8upx;
				margin: 0 30upx 20upx 0;
				background-color: #f6f6f6;
				&.on {
					padding: 3upx 18upx;
					border: solid 1upx #f47925;
				}
			}
		}
		.length{
			margin-top: 30upx;
			border-top: solid 1upx #aaa;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20upx;
			.text{
				font-size: 30upx;
			}
			.number{
				display: flex;
				justify-content: center;
				align-items: center;
				.input{
					width: 80upx;
					height: 60upx;
					margin: 0 10upx;
					background-color: #f3f3f3;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					input{
						width: 80upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						font-size: 26upx;
					}
				}
				
				.sub ,.add{
					width: 60upx;
					height: 60upx;
					background-color: #f3f3f3;
					border-radius: 5upx;
					.icon{
						font-size: 30upx;
						width: 60upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
						
					}
				}
			}
		}
		
	}
}
.share{
	display: none;
	&.show {
		display: block;
		.mask{
			animation: showPopup 0.15s linear both;
		}
		.layer {
			animation: showLayer 0.15s linear both;
		}
	}
	&.hide {
		display: block;
		.mask{
			animation: hidePopup 0.15s linear both;
		}
		
		.layer {
			animation: hideLayer 0.15s linear both;
		}
	}
	&.none {
		display: none;
	}
	.mask{
		background-color: rgba(0,0,0,.5);
		position: fixed;
		width: 100%;
		height: 100%;
		top:0;
		z-index: 11;
	}
	.layer{
		width: 92%;
		position: fixed;
		z-index: 12;
		padding: 0 4%;
		top: 100%;
		background-color: rgba(255,255,255,0.9);
		.list{
			width: 100%;
			display: flex;
			padding:10upx 0 30upx 0;
			.box{
				width: 25%;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				image{
					width: 13.8vw;
					height: 13.8vw;
				}
				.title{
					margin-top: 10upx;
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 26upx;
				}
			}
		}
		.btn{
			width: 100%;
			height: 100upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			border-top: solid 1upx #666666;
		}
		.h1{
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34upx;
		}
	}
}
</style>
